<!--
  Copyright © 2015-2019 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<!-- Control Buttons -->
<!-- change to ng-if="false" to get this to hide, this is WIP for the overall DAG react migration -->
<div ng-if="false" class="btn-group-vertical btn-group-sm zoom-control">
  <button class="btn btn-default"
          data-cy="pipeline-zoom-in-control"
          data-testid="pipeline-zoom-in-control"
          ng-click="DAGPlusPlusCtrl.zoomIn()"
          uib-tooltip="Zoom In"
          ng-if="!DAGPlusPlusCtrl.disableNodeClick"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="fa fa-plus"></i>
  </button>

  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.zoomOut()"
          data-cy="pipeline-zoom-out-control"
          data-testid="pipeline-zoom-out-control"
          ng-if="!DAGPlusPlusCtrl.disableNodeClick"
          uib-tooltip="Zoom Out"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="fa fa-minus"></i>
  </button>

  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.fitToScreen()"
          data-cy="pipeline-fit-to-screen-control"
          data-testid="pipeline-fit-to-screen-control"
          ng-if="!DAGPlusPlusCtrl.disableNodeClick"
          uib-tooltip="Fit to screen"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="icon-fit"></i>
  </button>

  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.cleanUpGraph()"
          data-cy="pipeline-clean-up-graph-control"
          data-testid="pipeline-clean-up-graph-control"
          ng-if="!DAGPlusPlusCtrl.isDisabled"
          uib-tooltip="Align"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="icon-clean"></i>
  </button>

  <!-- Undo Nodes Action -->
  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.undoActions()"
          ng-if="!DAGPlusPlusCtrl.isDisabled"
          ng-disabled="DAGPlusPlusCtrl.undoStates.length === 0"
          uib-tooltip="Undo (Ctrl/Cmd + Z)"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500"
          data-cy="pipeline-undo-action-btn"
          data-testid="pipeline-undo-action-btn">
    <i class="fa fa-undo"></i>
  </button>

  <!-- Redo Nodes Action -->
  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.redoActions()"
          ng-if="!DAGPlusPlusCtrl.isDisabled"
          ng-disabled="DAGPlusPlusCtrl.redoStates.length === 0"
          uib-tooltip="Redo (Ctrl/Cmd + Shift + Z)"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500"
          data-cy="pipeline-redo-action-btn"
          data-testid="pipeline-redo-action-btn">
    <i class="fa fa-repeat"></i>
  </button>

  <button class="btn btn-default"
          uib-tooltip="Move"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500"
          ng-if="!DAGPlusPlusCtrl.isDisabled"
          ng-click="DAGPlusPlusCtrl.selectionBox.toggleSelectionMode()"
          ng-class="{'move-mode-selected': !DAGPlusPlusCtrl.selectionBox.toggle}"
          data-cy="pipeline-move-mdoe-action-btn"
          data-testid="pipeline-move-mdoe-action-btn"
  >
    <i class="fa fa-arrows"></i>
  </button>

  <pipeline-comments-action-btn
    tooltip="'Show/Hide Pipeline Comments'"
    comments="DAGPlusPlusCtrl.pipelineComments"
    on-change="DAGPlusPlusCtrl.setPipelineComments"
    disabled='DAGPlusPlusCtrl.isDisabled'
  ></pipeline-comments-action-btn>
</div>

<!-- change to ng-if="true" to get this to render-->
<pipeline-canvas-action-btns
  ng-if="true"
  set-pipeline-comments="DAGPlusPlusCtrl.setPipelineComments"
  pipeline-comments="DAGPlusPlusCtrl.pipelineComments"
  is-disabled="DAGPlusPlusCtrl.isDisabled"
  selection-box="DAGPlusPlusCtrl.selectionBox"
  redo-states="DAGPlusPlusCtrl.redoStates"
  redo-actions="DAGPlusPlusCtrl.redoActions"
  undo-states="DAGPlusPlusCtrl.undoStates"
  undo-actions="DAGPlusPlusCtrl.undoActions"
  clean-up-graph="DAGPlusPlusCtrl.cleanUpGraph"
  fit-to-screen="DAGPlusPlusCtrl.fitToScreen"
  disable-node-click="DAGPlusPlusCtrl.disableNodeClick"
  zoom-out="DAGPlusPlusCtrl.zoomOut"
  zoom-in="DAGPlusPlusCtrl.zoomIn"
></pipeline-canvas-action-btns>

<div class="my-js-dag"
    ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled, 'normal-cursor': disableNodeClick, 'preview-mode': previewMode }"
    ng-click="DAGPlusPlusCtrl.handleCanvasClick($event, true)">
    <div id="diagram-container" ng-class="{'move-mode': !DAGPlusPlusCtrl.selectionBox.toggle, 'disabled': DAGPlusPlusCtrl.isDisabled}">
      <div id="dag-container" ng-style="DAGPlusPlusCtrl.panning.style">
        <!--
          The condition on ng-click is to prevent user from being able to click
          if the DAG is disabled. It will prevent the highlighting of nodes on select
        -->
        <div ng-repeat="node in nodes"
               class="box {{node.type}}"
               ng-style="node._uiPosition"
               data-type="{{node.type}}"
               id="{{node.id}}"
               data-nodeid="{{node.name}}"
               data-cy="plugin-node-{{node.plugin.name}}-{{node.type}}-{{$index}}"
               data-testid="plugin-node-{{node.plugin.name}}-{{node.type}}-{{$index}}"
               ng-class="{
                 'wrangler': node.plugin.name === 'Wrangler',
                 'node-menu-open': DAGPlusPlusCtrl.nodeMenuOpen === node.name,
                 'selected': DAGPlusPlusCtrl.isNodeSelected(node.id) || DAGPlusPlusCtrl.activePluginToComment == node.id,
               }"
        >
          <div
            class="comments-wrapper"
            ng-if="node.information.comments.list.length > 0 || DAGPlusPlusCtrl.activePluginToComment == node.id"
          >
            <comment
              comments="node.information.comments.list"
              comments-id="node.id"
              on-change="DAGPlusPlusCtrl.setComments"
              placement="'bottom-start'"
              is-open="DAGPlusPlusCtrl.activePluginToComment == node.id"
              on-open="DAGPlusPlusCtrl.setPluginActiveForComment"
              on-close="DAGPlusPlusCtrl.setPluginActiveForComment"
              disabled="DAGPlusPlusCtrl.isDisabled"
            ></comment>
          </div>
          <div class="node"
                ng-mouseenter="DAGPlusPlusCtrl.nodeMouseEnter(node)"
                ng-mouseleave="DAGPlusPlusCtrl.nodeMouseLeave(node)"
                ng-click="DAGPlusPlusCtrl.selectNode($event, node)">
            <div class="inner" ng-if="['action', 'sparkprogram'].indexOf(node.type) !== -1"></div>
            <div class="endpoint-circle"
                  ng-if="node.type !== 'splittertransform'"
                  ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled, 'endpoint-circle-right': node.type === 'condition'}"
                  ng-attr-id="{{node.type === 'condition' ? 'endpoint_' + node.id + '_condition_true' : 'endpoint_' + node.id}}"
                  data-nodeid="{{node.name}}"
                  data-nodetype="{{node.type === 'condition' ? 'condition-true' : 'regular'}}"
                  ng-mouseup="DAGPlusPlusCtrl.selectEndpoint($event, node)"
                  data-cy="plugin-endpoint-{{node.plugin.name}}-{{node.type}}-right"
                  data-testid="plugin-endpoint-{{node.plugin.name}}-{{node.type}}-right">
              <div class="endpoint-caret" ng-if="!DAGPlusPlusCtrl.isDisabled"></div>
            </div>
            <div class="endpoint-circle node-splitter-endpoint"
                  ng-if="node.type === 'splittertransform'"
                  ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled}">
              <div class="node-spitter-num-ports"
                    ng-if="node.outputSchema.length && node.outputSchema[0].name !== 'etlSchemaBody'"
                    ng-bind="node.outputSchema.length">
              </div>
              <div class="node-splitter-popover"
                    ng-if="node.outputSchema.length && node.outputSchema[0].name !== 'etlSchemaBody'"
                    my-splitter-popover
                    node="node"
                    ports="node.outputSchema"
                    is-disabled="DAGPlusPlusCtrl.isDisabled"
                    on-metrics-click="DAGPlusPlusCtrl.onMetricsClick"
                    disable-metrics-click="disableMetricsClick"
                    metrics-data="metricsData">
              </div>
            </div>
            <div class="endpoint-circle endpoint-circle-bottom"
                  ng-if="node.type === 'condition'"
                  ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled}"
                  ng-mouseup="DAGPlusPlusCtrl.selectEndpoint($event, node)"
                  ng-attr-id="{{'endpoint_' + node.id + '_condition_false'}}"
                  data-nodeid="{{node.name}}"
                  data-nodetype="condition-false"
                  data-cy="plugin-endpoint-{{node.plugin.name}}-{{node.type}}-false"
                  data-testid="plugin-endpoint-{{node.plugin.name}}-{{node.type}}-false">
              <div class="endpoint-caret" ng-if="!DAGPlusPlusCtrl.isDisabled"></div>
            </div>
            <div ng-click="node.isPluginAvailable && !disableNodeClick && DAGPlusPlusCtrl.onNodeClick($event, node)">
              <div class="error-node-notification" ng-if="node.errorCount > 0" data-cy="node-badge" data-testid="node-badge">
                <span class="badge" ng-class="{'badge-warning': !node.error, 'badge-danger': node.error}">
                  <span data-cy="node-error-count" data-testid="node-error-count">{{node.errorCount}}</span>
                </span>
              </div>
            </div>
            <div class="node-info" ng-class="{ 'node-no-errors': node.errorCount === 0 || DAGPlusPlusCtrl.isDisabled}">
              <div
                ng-if="!DAGPlusPlusCtrl.shouldShowCustomIcon(node)"
                class="node-icon fa {{node.icon}}"></div>

              <div
                class="node-icon icon-container"
                ng-if="DAGPlusPlusCtrl.shouldShowCustomIcon(node)"
              >
                <img src="{{ DAGPlusPlusCtrl.getCustomIconSrc(node) }}" />
              </div>


              <div class="node-metadata">
                <div class="node-name"
                      ng-bind="node.plugin.label || node.name"
                      ng-attr-title="{{node.plugin.label || node.name}}"
                      data-testid="plugin-node-name-{{node.plugin.name}}-{{node.type}}-{{$index}}">
                </div>
                <div class="node-version"
                      ng-class="{ 'hidden': DAGPlusPlusCtrl.nodeMenuOpen === node.name}"
                      ng-bind="node.plugin.artifact.version">
                </div>
                <button data-cy="node-properties-btn" data-testid="node-properties-btn" ng-class="{'node-configure-btn': true,
                                 'btn-shown': DAGPlusPlusCtrl.nodeMenuOpen === node.name,
                                 'btn-disabled': !node.isPluginAvailable}"
                  ng-click="!disableNodeClick && DAGPlusPlusCtrl.onNodeClick($event, node)" ng-disabled="!node.isPluginAvailable">
                  <span class="node-configure-btn-label" uib-tooltip="{{ !node.isPluginAvailable ? 'Plugin artifact is not available.' : ''}}"
                    tooltip-popup-delay="300" tooltip-placement="right" tooltip-append-to-body="true">
                    Properties
                  </span>
                </button>
              </div>
            </div>
            <div class="node-preview-data-btn" ng-if="previewMode && ['action', 'sparkprogram', 'condition'].indexOf(node.type) === -1" data-cy="{{node.plugin.name + '-preview-data-btn'}}" data-testid="{{node.plugin.name + '-preview-data-btn'}}">
              <a href ng-click="DAGPlusPlusCtrl.onPreviewData($event, node)">Preview Data</a>
            </div>
            <div class="node-metrics"
                  ng-if="DAGPlusPlusCtrl.isDisabled && ['action', 'sparkprogram', 'condition'].indexOf(node.type) === -1">
              <my-node-metrics
                on-click="DAGPlusPlusCtrl.onMetricsClick"
                node="node"
                disabled="disableMetricsClick"
                metrics-data="metricsData">
              </my-node-metrics>
            </div>
            <div class="node-alerts-errors"
                  ng-if="DAGPlusPlusCtrl.shouldShowAlertsPort(node) || DAGPlusPlusCtrl.shouldShowErrorsPort(node)">
              <div class="node-alerts"
                    ng-if="DAGPlusPlusCtrl.shouldShowAlertsPort(node)">
                <span>Alert</span>
                <div class="endpoint-circle endpoint-circle-bottom"
                      ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled}"
                      ng-mouseup="DAGPlusPlusCtrl.selectEndpoint($event, node)"
                      ng-attr-id="{{'endpoint_' + node.id + '_alert'}}"
                      data-nodeid="{{node.name}}"
                      data-nodetype="alert">
                  <div class="endpoint-caret" ng-if="!DAGPlusPlusCtrl.isDisabled"></div>
                </div>
              </div>
              <div class="node-errors"
                    ng-if="DAGPlusPlusCtrl.shouldShowErrorsPort(node)">
                <div class="endpoint-circle endpoint-circle-bottom"
                      ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled}"
                      ng-mouseup="DAGPlusPlusCtrl.selectEndpoint($event, node)"
                      ng-attr-id="{{'endpoint_' + node.id + '_error'}}"
                      data-nodeid="{{node.name}}"
                      data-nodetype="error">
                  <div class="endpoint-caret" ng-if="!DAGPlusPlusCtrl.isDisabled"></div>
                </div>
                <span>Error</span>
              </div>
            </div>
            <div class="node-actions">
              <span ng-if="DAGPlusPlusCtrl.nodeMenuOpen !== node.name"
                    ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled}"
                    class="menu-icon menu-icon-node fa fa-bars float-xs-right"
                    ng-click="!DAGPlusPlusCtrl.isDisabled && DAGPlusPlusCtrl.toggleNodeMenu(node, $event)"
                    data-cy="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-toggle"
                    data-testid="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-toggle"
              >
              </span>
            </div>
          </div>
          <div ng-if="DAGPlusPlusCtrl.nodeMenuOpen === node.name"
                ng-click="$event.stopPropagation()"
                class="node-popover-menu">
            <div
              class="menu-icon fa fa-bars"
              ng-click="DAGPlusPlusCtrl.toggleNodeMenu(node.name, $event)"
            >
            </div>
            <div class="menu-content">
              <div
                class="menu-content-action"
                ng-click="DAGPlusPlusCtrl.setPluginActiveForComment(node.id)"
                data-cy="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-comment"
                data-testid="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-comment"
              >
                Add Comment
              </div>
              <div
                class="menu-content-action"
                ng-click="DAGPlusPlusCtrl.onKeyboardCopy()"
                data-cy="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-copy"
                data-testid="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-copy"
              >
                Copy
              </div>
              <hr />
              <div
                class="menu-content-action menu-content-delete"
                ng-click="DAGPlusPlusCtrl.deleteSelectedNodes()"
                data-cy="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-delete"
                data-testid="hamburgermenu-{{node.plugin.name}}-{{node.type}}-{{$index}}-delete"
              >
                Delete
              </div>
            </div>
          </div>
          <div ng-if="!DAGPlusPlusCtrl.isDisabled">
            <plugin-context-menu
              node-id="'{{node.id}}'"
              get-plugin-configuration="DAGPlusPlusCtrl.getPluginConfiguration"
              get-selected-connections="DAGPlusPlusCtrl.getSelectedConnections"
              get-selected-nodes="DAGPlusPlusCtrl.getSelectedNodes"
              on-delete="DAGPlusPlusCtrl.deleteSelectedNodes"
              on-open="DAGPlusPlusCtrl.onPluginContextMenuOpen"
              on-add-comment="DAGPlusPlusCtrl.setPluginActiveForComment"
            ></plugin-context-menu>
          </div>
        </div>
      </div>
      <div ng-if="!DAGPlusPlusCtrl.isDisabled">
        <pipeline-context-menu
          on-wrangler-source-add="DAGPlusPlusCtrl.onPipelineContextMenuPaste"
          on-nodes-paste="DAGPlusPlusCtrl.onPipelineContextMenuPaste"
          pipeline-artifact-type="DAGPlusPlusCtrl.pipelineArtifactType"
          on-zoom-in="DAGPlusPlusCtrl.zoomIn"
          on-zoom-out="DAGPlusPlusCtrl.zoomOut"
          fit-to-screen="DAGPlusPlusCtrl.fitToScreen"
          pretty-print-graph="DAGPlusPlusCtrl.cleanUpGraph"
        ></pipeline-context-menu>
        <selection-box
          boundaries="DAGPlusPlusCtrl.selectionBox.boundaries"
          selectables="DAGPlusPlusCtrl.selectionBox.selectables"
          toggle-selection="DAGPlusPlusCtrl['selectionBox'].toggle"
          on-selection-start="DAGPlusPlusCtrl.selectionBox.start"
          on-selection-move="DAGPlusPlusCtrl.selectionBox.move"
          on-selection-end="DAGPlusPlusCtrl.selectionBox.end"
        ></selection-box>
      </div>
    </div>
</div>

<dag-minimap
  canvas-scale="DAGPlusPlusCtrl.scale"
  panning="DAGPlusPlusCtrl.setCanvasPanning(top, left)"
></dag-minimap>
